<template>
	<view>
		<view class="nav">
			当前种子币：<text>{{now_zhongzi}}</text>
		</view>
		<view class="form-group">
			<view class="form-item">
				<label>当前资产</label>
				<view>{{now_jifen}}</view>
			</view>
			<view class="form-item">
				<label>种子币</label>
				<view>
					<!-- <input type="number" placeholder="请输入要兑换的种子币" v-model="form.price"/> -->
					<view class="mony-item" v-for="(item,key) in moneys"><text :class="money_index == key ? 'active' : ''" @tap="selectMoney(key)">{{item}}</text></view>
				</view>
			</view>
			<view class="form-item">
				<label>交易密码</label>
				<view>
					<input type="password" placeholder="请输入叫密码" v-model="form.pwd1"/>
				</view>
			</view>
			<view class="form-item">
				<button @tap="submit">立即兑换</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				now_zhongzi:0,
				now_jifen : 0,
				form:{
					pwd1:'',
					price:''
				},
				money_index : 0,
				moneys : [3000,10000,30000,50000]
			}
		},
		onLoad() {
			this.getData();
		},
		methods:{
			//页面加载数据
			getData(){
				this.ajax('user/getinfo',{
					data:{},
					success:(res) => {
						res = res.data;
						this.now_zhongzi = res.info.zhongb;
						this.now_jifen = res.info.jifen;
					}
				})
			},
			submit(){
				if(!this.form.pwd1)return this.toasts('请输入交易密码');
				this.ajax('user/change',{
					data:{
						pwd1 : this.form.pwd1,
						price : this.moneys[this.money_index]
					},
					success:(res) => {
						res = res.data;
						this.toasts(res.info);
						if(res.status) {
							this.form = {
								pwd1:'',
								zhongb:''
							};
							this.getData();
						}
					}
				});
			},
			selectMoney(key){
				this.money_index = key;
			}
		}
	}
</script>

<style>
	.nav{height: 200upx;background: #409EFF;line-height: 200upx;font-size: 30upx;text-align: center;color:#FFFFFF}
	.nav text{font-size: 50upx;}
	.form-group{background: #FFFFFF;padding:20upx 0;}
	.form-item {width: calc(100% - 40upx);margin:20upx;overflow: hidden;line-height: 60upx;font-size: 35upx;}
	.form-item label,.form-item view{float:left;width:160upx;}
	.form-item view{width: calc(100% - 170upx);margin-left: 10upx;}
	.form-item input{font-size: 35upx;height:60upx;}
	.form-item button{height:80upx;line-height: 80upx;background: #409EFF;color:#FFFFFF;border:none;margin-top: 40upx;}
	.mony-item{float: left;width: 25%;text-align: center;}
	.mony-item > text{padding:5upx 20upx;border:1upx solid #409EFF;font-size: 25upx;border-radius: 5upx;color:#666666}
	.mony-item .active{color:#FFFFFF;background: #409EFF;}
</style>
